<template>
	<view class="page">
		<view class="sider hide-scroller-bar">
			<SideBarWishes v-model="sideBarIndex" @change="onSidebarChange" />
		</view>

		<view class="content hide-scroller-bar">
			<view class="content-tip">
				<text>{{ tip }}</text>
			</view>

			<DishCard
				v-for="item in dishesList"
				:key="item.id"
				:data="item"
				:swipe="userStore.admin"
				@edit="onEditDishes"
				@delete="onDeleteDishes"
			>
				<view v-if="userStore.normalAdmin">
					<button
						v-if="!item.isWished && sideBarIndex !== -2"
						class="card-btn"
						size="mini"
						plain
						type="primary"
						@tap="onAddToWishlist(item)"
					>
						下周想吃
					</button>
					<button v-else class="card-btn" @tap="onRemoveFromWishlist(item)">
						不想吃
					</button>
				</view>
			</DishCard>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

import { useController } from './controller.js';
import { useUserStore } from '../../stores/useUserStore.js';
import { showConfirmDialog, showDialog } from '../../hooks/useConfirm.js';
import { showSuccessToast, showToast } from '../../utils/toast.utils.js';

const userStore = useUserStore();
const { tip, sideBarIndex, dishesList, ...ctl } = useController();

// 点击sidebar
const onSidebarChange = () => {
	ctl.getDishesList();
};
// 不想吃
const onRemoveFromWishlist = async (dishes) => {
	await ctl.removeFromWishlist(dishes.id);
	await ctl.getDishesList();
	showSuccessToast();
};
// 添加到我想吃
const onAddToWishlist = async (dishes) => {
	await ctl.addToWishlist(dishes.id);
	await ctl.getDishesList();
	showSuccessToast();
};
// 修改菜品
const onEditDishes = (date) => {
	console.log('onEditDishes', date);
	uni.navigateTo({
		url: '/pages/update-dishes/update-dishes' + `?id=${date.id}`,
	});
};

// 删除菜品
const onDeleteDishes = async (dishes) => {
	console.log('onDeleteDishes', dishes);
	const confirm = await showDialog({ title: '删除', content: `确定删除"${dishes.name}"吗？` });
	if (!confirm) return;

	await ctl.deleteDishes(dishes.id);
	showConfirmDialog({ title: '成功', content: `删除"${dishes.name}"成功` });
};
</script>

<style scoped>
.page {
	display: flex;

	height: 100%;
	width: 100%;
}

.sider {
	height: 100%;
	overflow: auto;
	background-color: #f8f8f8;
}

.content {
	flex: 1;
	height: 100%;
	overflow: auto;
}

.content-tip {
	padding: 12rpx;
	color: #666;
	font-size: 14px;
	/* font-weight: bold; */
}

.content-options {
	display: flex;
	flex-direction: column;

	padding: 32rpx;
}

.content-options-gap {
	height: 32rpx;
}
</style>
